<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <style>
    :root {
        --blue: #1376ff;
        --black: #222228;
        --white: #fff;
        --gray-medium: #39393e;
        --gray-light: #b0b0b2;
        --radius: 10px;
        --item-padding: 1.5rem 1.6rem;
        --sidebar-width: 305px;
        --sidebar-collapse-width: 90px;
    }
    body {
        margin: 0;
        font-family: Arial, sans-serif;
        display: flex;
    }

    /* 侧面导航栏样式 */
    /* .sidebar {
        width: 10%;
        background-color: rgb(50, 88, 192);
        color: #fff;
        height: 100vh;
        position: fixed;
        padding: 2.5%;
        box-shadow: 2px 0 5px rgba(97, 130, 221, 0.103);
        font-size: 20px;
    } */
    .sidebar {
        overflow: hidden;
        width: 10%;
        color: #fff;
        background-color: #333;
        height: 100vh;
        position: fixed;
        padding: 2.5% 2.5% 2.5% 2.5%;
        margin: 0;
        display: flex;
        flex-direction: column;
        transition: 0.5s all;
        box-shadow: 2px 0 5px rgba(97, 130, 221, 0.103);
    }
    .sidebar.collapse {
        width: var(--sidebar-collapse-width);
    }

    .content {
        font-family: Arial, Helvetica, sans-serif;
        display: none;
        margin: 0;
        padding: 20px 0 0 10px;
    }

    .content a{
        display: block;
        margin: 0px 0 0 20px; /* 增加链接之间的间距 */
        padding: 15px;
        border-radius: var(--radius);
        transform: translateY(-50%);
        transition: 0.3s all;
        white-space: nowrap;
        /* 添加其他样式 */
        color: var(--white); /* 示例：设置链接颜色 */
        text-decoration: none; /* 示例：移除下划线 */
        font-size: 20px;
    }
    .content a:hover {
        background-color: #1864e9;
    }

    .sidebar h2 {
        text-align: left;
        margin-bottom: 20px;
        font-size: 30px;
    }

    .sidebar__menu {
        padding: 0;
        margin: 0;
    }
    .sidebar__menu--item {
        list-style-type: none; /* 去掉圆点 */
        cursor: pointer;
        padding: 15px 20px 15px 20px; /* 上右下左 */
        margin: 0 ;
        border-radius: var(--radius);
        /* transition: all 150ms cubic-bezier(0.92, 3, 0.92, 0.92); */
        position: relative;
        font-size: 20px;
    }

    .sidebar__menu--item:hover svg {
        fill: var(--white);
    }
    .sidebar__menu--item:hover,
    .sidebar__menu--item:active {
        color: var(--white);
        background-color: #1864e9;
    }
    .sidebar__menu--item.is-active {
        color: var(--white);
        background-color: #1864e9;
    }
    .sidebar__menu--item.is-active svg {
        fill: #007bff;
    }
    .sidebar__menu--item:not(:last-child) {
        margin-bottom: 1rem;
    }
    .sidebar__menu--item span {
        margin-left: 1.2rem;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        transition: 0.3s all;
        white-space: nowrap;
    }
    .sidebar__menu--item a {
        margin-left: 1.2rem;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        transition: 0.3s all;
        white-space: nowrap;
        /* 添加其他样式 */
        color: var(--white); /* 示例：设置链接颜色 */
        text-decoration: none; /* 示例：移除下划线 */
    }

    .sidebar__menu.collapse > li > span {
        opacity: 0;
    }
    /* .sidebar ul {
        list-style-type: square;
        padding: 0px;
    }

    .sidebar ul li {
        margin: 20px 0;
    }

    .sidebar ul li a {
        color: #fff;
        text-decoration: none;
        font-size: 15px;
        display: block;
    } */

    .sidebar__nav {
        width: 100%;
        padding-left: 0;
        margin: 0;
        padding-top: 22px;
    }
    .sidebar__nav h5 {
        font-size: 1.2rem;
        margin-bottom: 22px;
        font-weight: 700;
        transition: 0.2s all;
    }
    .sidebar__nav h5.collapse {
        margin-left: -4px;
        }
    #open-sidebar {
        position: fixed;
        top: 50%;
        right: 0;
        z-index: 1000; /* 确保按钮在侧边栏上方 */
        background: #007bff;
        color: white;
        border: none;
        padding: 10px;
        cursor: pointer;
        border-radius: 5px 0 0 5px;
    }

    #open-sidebar:hover {
        background: #0056b3;
    }

    /* 主内容区域样式 */
    .main-content {
        width: 85%;
        margin-left: 15%; /* 与侧面导航栏宽度一致 */
        padding: 0;
        flex-grow: 1;
        height: 100vh;
        overflow: hidden;
    }

    iframe {
        width: 100%;
        height: 100%;
        border: none;
    }

    svg {
        width: 18px;
        height: 18px;
        fill: #fff;
    }
    </style>

        <style>
        /* 侧边栏样式 */
        #sidebar_right {
            position: fixed;
            top: 0;
            right: -300px; /* 默认隐藏 */
            width: 300px;
            height: 100%;
            background: white;
            box-shadow: -2px 0 5px rgba(0,0,0,0.3);
            transition: right 0.3s ease-in-out;
            z-index: 1000;
            overflow: hidden;
        }

        #sidebar_right.open {
            right: 0;
        }


        /* iframe 样式 */
        #sidebar-iframe {
            width: 100%;
            height: 100%;
            border: none;
        }
    </style>

</head>
<body>
    <div class="sidebar" style="opacity: 0.9;">
        <div >
            <h2 id="h2">专家知识库</h2>
        </div>
        <div class="sidebar__nav">
            <ul class="sidebar__menu" id="sidebar__menu">
                <li class="sidebar__menu--item" onclick="toggleContent('all_function')">
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512.001 512.001">
                        <path d="M503.402 228.885L273.684 19.567c-10.083-9.189-25.288-9.188-35.367-.001L8.598 228.886c-8.077 7.36-10.745 18.7-6.799 28.889 3.947 10.189 13.557 16.772 24.484 16.772h36.69v209.721c0 8.315 6.742 15.057 15.057 15.057h125.914c8.315 0 15.057-6.741 15.057-15.057V356.932h74.002v127.337c0 8.315 6.742 15.057 15.057 15.057h125.908c8.315 0 15.057-6.741 15.057-15.057V274.547h36.697c10.926 0 20.537-6.584 24.484-16.772 3.941-10.19 1.273-21.529-6.804-28.89zM445.092 42.73H343.973l116.176 105.636v-90.58c0-8.315-6.741-15.056-15.057-15.056z" /></svg>          
                    <a href="/home" target="content-frame" style="font-size: 20px;"> 功能总览</a>
                </li>

                <li class="sidebar__menu--item" onclick="toggleContent('purchasing')">
                    <svg height="512" viewBox="0 0 512.012 512.012" width="512" xmlns="http://www.w3.org/2000/svg">
                        <path d="M495.266 394.775c11.112-23.435 16.742-48.57 16.742-74.794 0-93.61-74.304-170.285-167.347-174.787-20.968-75.53-89.845-128.213-168.653-128.213-97.047 0-176 78.505-176 175 0 26.224 5.63 51.359 16.742 74.794L.299 349.04c-2.094 10.472 7.144 19.728 17.618 17.656l83.279-16.465c20.862 9.896 43.054 15.426 66.17 16.529 29.148 104.951 146.217 157.593 243.452 111.471 91.207 18.032 84.094 16.75 86.189 16.75 9.479 0 16.56-8.686 14.709-17.941zm-385.17-73.6a15 15 0 00-9.737-1.359l-66.24 13.097 13.049-65.25a14.993 14.993 0 00-1.354-9.77c-10.487-20.516-15.806-42.691-15.806-65.912 0-79.953 65.495-145 146-145 62.915 0 118.319 40.91 137.681 99.417-91.706 11.725-160.775 94.472-151.914 189.891-18.075-1.737-35.391-6.787-51.679-15.114zm354.753 74.488l13.049 65.25-66.24-13.097a15.005 15.005 0 00-9.737 1.359c-20.516 10.487-42.691 15.806-65.912 15.806-79.953 0-145-65.047-145-145s65.047-145 145-145c80.505 0 146 65.047 146 145 0 23.221-5.318 45.396-15.806 65.912a14.992 14.992 0 00-1.354 9.77z" /></svg>
                    <span>序列预测</span>
                </li>
                <li id="purchasing" class="content">
                    <a href="/view/purchasing" target="content-frame">购买力预测详情</a>
                    <a href="/view/price" target="content-frame">售价管理详情</a>
                </li>
    <!-- {#            <li onclick="toggleContent(234)" id="ARIMA" class="content">ARIMA#}
    {#                <li id="234" class="content">#}
    {#                        <a href="/view/purchasing" target="content-frame">购买力预测</a>#}
    {#                        <a href="/view/price" target="content-frame">售价管理</a>#}
    {#                    </li>#}
    {#                </li>#}
    {#            <li onclick="toggleContent(345)" id="LSTM" class="content">LSTM#}
    {#            <li id="345" class="content">#}
    {#                    <a href="/view/purchasing" target="content-frame">购买力预测</a>#}
    {#                    <a href="/view/price" target="content-frame">售价管理</a>#}
    {#                </li>#}
    {#            </li>#}

    {#            <li onclick="toggleContent('price')">售价管理</li>#}
    {#            <li id="price" class="content">#}
    {#                <a href="/view/price" target="content-frame">售价管理详情</a>#}
    {#            </li>#} -->

                <li class="sidebar__menu--item" onclick="toggleContent('user')">
                    <svg height="512" viewBox="0 0 502.017 502.017" width="512" xmlns="http://www.w3.org/2000/svg"><path d="M251.009 0C112.38 0 0 112.38 0 251.009s112.38 251.009 251.009 251.009 251.009-112.38 251.009-251.009S389.637 0 251.009 0zm14.707 29.897c110.489 7.279 199.124 95.915 206.404 206.404H265.716zm-14.707 442.705c-122.187 0-221.594-99.406-221.594-221.594 0-117.243 91.533-213.511 206.886-221.111v221.111c0 3.901 1.55 7.641 4.308 10.399l156.326 156.326c-40.436 35.489-91.711 54.869-145.926 54.869zm166.726-75.667l-131.22-131.219h185.608c-3.177 48.743-22.126 94.457-54.388 131.219z"/></svg>
                    <span>聚类分析</span>
                </li>
                <li id="user" class="content">
                    <a href="/view/user" target="content-frame">用户画像详情</a>
                </li>
            
                <li class="sidebar__menu--item" onclick="toggleContent('inventory')">
                    <svg height="512pt" viewBox="0 0 512 512" width="512pt" xmlns="http://www.w3.org/2000/svg">
                        <path d="M482 292.25V46c0-8.285-6.715-15-15-15h-76V15c0-8.285-6.715-15-15-15s-15 6.715-15 15v16h-60V15c0-8.285-6.715-15-15-15s-15 6.715-15 15v16h-60V15c0-8.285-6.715-15-15-15s-15 6.715-15 15v16h-60V15c0-8.285-6.715-15-15-15S91 6.715 91 15v16H15C6.715 31 0 37.715 0 46v391c0 8.285 6.715 15 15 15h249.805c24.25 36.152 65.488 60 112.195 60 74.438 0 135-60.563 135-135 0-32.07-11.25-61.563-30-84.75zM91 61v15c0 8.285 6.715 15 15 15s15-6.715 15-15V61h60v15c0 8.285 6.715 15 15 15s15-6.715 15-15V61h60v15c0 8.285 6.715 15 15 15s15-6.715 15-15V61h60v15c0 8.285 6.715 15 15 15s15-6.715 15-15V61h61v60H30V61zM30 422V151h422v113.805C430.535 250.41 404.73 242 377 242c-47.398 0-89.164 24.559-113.258 61.613A14.911 14.911 0 00257 302h-30c-8.285 0-15 6.715-15 15s6.715 15 15 15h22.723a133.88 133.88 0 00-6.883 30H227c-8.285 0-15 6.715-15 15s6.715 15 15 15h15.84a133.666 133.666 0 006.883 30zm347 60c-57.898 0-105-47.102-105-105s47.102-105 105-105 105 47.102 105 105-47.102 105-105 105zm0 0" />
                        <path d="M437 362h-45v-45c0-8.285-6.715-15-15-15s-15 6.715-15 15v60c0 8.285 6.715 15 15 15h60c8.285 0 15-6.715 15-15s-6.715-15-15-15zm0 0M136 182h-30c-8.285 0-15 6.715-15 15s6.715 15 15 15h30c8.285 0 15-6.715 15-15s-6.715-15-15-15zm0 0M136 242h-30c-8.285 0-15 6.715-15 15s6.715 15 15 15h30c8.285 0 15-6.715 15-15s-6.715-15-15-15zm0 0M136 302h-30c-8.285 0-15 6.715-15 15s6.715 15 15 15h30c8.285 0 15-6.715 15-15s-6.715-15-15-15zm0 0M227 212h30c8.285 0 15-6.715 15-15s-6.715-15-15-15h-30c-8.285 0-15 6.715-15 15s6.715 15 15 15zm0 0M227 272h30c8.285 0 15-6.715 15-15s-6.715-15-15-15h-30c-8.285 0-15 6.715-15 15s6.715 15 15 15zm0 0M136 362h-30c-8.285 0-15 6.715-15 15s6.715 15 15 15h30c8.285 0 15-6.715 15-15s-6.715-15-15-15zm0 0M347 212h30c8.285 0 15-6.715 15-15s-6.715-15-15-15h-30c-8.285 0-15 6.715-15 15s6.715 15 15 15zm0 0" /></svg>
                    <span>调度算法</span>
                </li>
                <li id="inventory" class="content">
                    <a href="/view/inventory" target="content-frame">库存管理详情</a>
                </li>
            
                <li class="sidebar__menu--item" onclick="toggleContent('fault')">
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
                        <path d="M497 51H277.821a14.999 14.999 0 00-14.272 10.386L247.51 111H15c-8.284 0-15 6.716-15 15v320c0 8.284 6.716 15 15 15h482c8.284 0 15-6.716 15-15V66c0-8.284-6.716-15-15-15zM30 141h207.811l-9.698 30H30v-30zm452 290H30V201h209.028a15 15 0 0014.273-10.386L288.736 81H482v350z" /></svg>
                    <span>分类预测</span>
                </li>
                <li id="fault" class="content">
                    <a href="/view/fault" target="content-frame">故障预警详情</a>
                </li>
            </ul>
        </div>
    </div>
    <div class="main-content">
        <!-- 使用iframe嵌入其他页面 -->
        <iframe name="content-frame" src="/home" frameborder="0"></iframe>
    </div>
    
        <!-- 侧边栏 -->
    <div id="sidebar_right">
        <iframe id="sidebar-iframe" src="/ai"></iframe>
    </div>

    <!-- 右上角打开按钮 -->
    <button class="open-sidebar" id="open-sidebar" onclick="toggleChat()">◀</button>


    <script>
        document.addEventListener("DOMContentLoaded", function () {
            const sidebar = document.getElementById("sidebar_right");
            const openBtn = document.getElementById("open-sidebar");
            

            openBtn.addEventListener("click", function () {
                // 如果侧边栏已打开，关闭它；如果侧边栏已关闭，打开它
                if (sidebar.classList.contains("open")) {
                    sidebar.classList.remove("open");
                    openBtn.textContent = "◀"; // 修改按钮文本为右箭头
                    openBtn.style.right = "0";  // 恢复按钮位置
                } else {
                    sidebar.classList.add("open");
                    openBtn.textContent = "▶"; // 修改按钮文本为左箭头
                    openBtn.style.right = "280px"; // 将按钮移至侧边栏旁边
                }
            });

            // 监听 iframe 发送的消息
            window.addEventListener("message", function (event) {
                if (event.data.action === "closeSidebar") {
                    sidebar.classList.remove("open");
                }
            });

        });
    </script>


    <script>
        function toggleContent() {
            var ids = Array.from(arguments)
            ids.forEach(function(id) {
                var content = document.getElementById(id);
                if (content.style.display === 'block') {
                    content.style.display = 'none';
                } else {
                    content.style.display = 'block';
                }
            });
        }

    </script>

    <script>
        // 侧边栏菜单点击事件
        document.querySelectorAll('.sidebar__menu-item').forEach(item => {
            item.addEventListener('click', function() {
                document.querySelectorAll('.sidebar__menu-item').forEach(i => i.classList.remove('active'));
                this.classList.add('active');
            });
        });
    </script>

    <script>
    document.addEventListener("DOMContentLoaded", () => {
        // 关键词 -> 菜单 ID 映射
        const keywordToModule = {
            "购买力预测": "purchasing",
            "售价管理": "price",
            "用户画像": "user",
            "库存管理": "inventory",
            "故障预警": "fault"
        };

        // 监听来自聊天模块的消息
        window.addEventListener("message", (event) => {
            const keyword = event.data?.category;
            if (!keyword) return;

            const moduleId = keywordToModule[keyword];
            if (!moduleId) {
                console.warn("未知分类关键词:", keyword);
                return;
            }

            // 切换菜单展开
            toggleContent(moduleId);

            // 切换 iframe 内容
            const iframe = document.querySelector("iframe[name='content-frame']");
            iframe.src = `/view/${moduleId}`;

            // 设置菜单高亮
            document.querySelectorAll(".sidebar__menu--item").forEach(item => item.classList.remove("active"));
            const target = document.querySelector(`[onclick*="${moduleId}"]`);
            if (target) {
                target.classList.add("active");
            }
        });
    });
    </script>



</body>
</html>
